<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="myapp">
        <!-- 使用组件 -->
        <my-alert title="按钮一" @myclick="myalert(12333)">123</my-alert>
        <!-- 这是两个组件实例 数据独立  -->
        <my-alert title="按钮二"></my-alert>

    </div>
</body>
<script>
    const App = Vue.createApp({
        methods: {
            myalert(num = 123) {
                alert("警告!" + num);
            }
        }
    });
    //定义组件
    const alertCompent = {
        data() {
            return {
                msg: "alert!",
                count: 0
            }
        },
        methods: {
            click() {

                // 传递参数前可以处理内部逻辑
                alert(this.msg + ++this.count);
                // 可以携带默认参数
                this.$emit('myclick', this.title);
            }
        },
        // 外部属性
        props: ["title"],
        //外部方法 @XX="$emit('YYY')" -> @YYY='ZZZ' 事件传递 支持传参
        // template: `<div><button @click="$emit('myclick')">{{title}}</button></div>`
        template: `<div><button @click="click">{{title}}</button></div>`

    }
    //挂载组件
    App.component("my-alert", alertCompent);
    App.mount("#myapp")
</script>